<template>
    <!-- components/dateRange/dateRange.wxml -->
    <view class="date-filter">
        <view class="filter-title">日期：</view>
        <picker @change="bindPickerStartChange" class="pinker-comp" mode="date" :value="index">
            <view class="filter-value" data-type="0" id="start">
                <view>{{ startDate }}</view>
            </view>
        </picker>
        <view class="date-split">~</view>
        <picker @change="bindPickerEndChange" class="pinker-comp" mode="date" :value="index">
            <view class="filter-value" data-type="1" id="end">
                <view>{{ endDate }}</view>
            </view>
        </picker>
    </view>
</template>

<script>
// components/dateRange/dateRange.js
import moment from '../../utils/bak/moment.js';
export default {
    data() {
        return {
            // 这里是一些组件内部数据
            endDate: moment().format('YYYY-MM-DD'),
            startDate: moment(new Date().getTime() - 43200 * 60 * 1000).format('YYYY-MM-DD')
        };
    },
    props: {
        // 这里定义了innerText属性，属性值可以在组件使用时指定
        range: {
            type: Number,
            default: 30
        },
        default: {
            type: Number,
            default: 30
        }
    },
    mounted() {
        // 处理小程序 attached 生命周期
        this.attached();
    },
    destroyed: function () {
        // 在组件实例被从页面节点树移除时执行
    },
    methods: {
        attached: function () {
            // 在组件实例进入页面节点树时执行
            this.initDate();
        },

        initDate: function (params) {
            this.setData({
                startDate: moment(new Date().getTime() - this.default * 24 * 60 * 60 * 1000).format('YYYY-MM-DD')
            });
        },

        /**
         * 筛选条件改变
         */

        bindPickerStartChange: function (e) {
            if (this.range === 0) {
                this.setData({
                    startDate: e.detail.value
                });
            } else {
                let afterThirty = moment(e.detail.value).add(30, 'days').calendar(); //开始时间往后30天
                if (moment(afterThirty).format('YYYY-MM-DD') < this.endDate || this.startDate > this.endDate) {
                    //开始时间和结束时间大于30天
                    uni.showToast({
                        title: '日期间隔最大30天',
                        icon: 'none',
                        duration: 2000
                    });
                    this.setData({
                        endDate: moment(afterThirty).format('YYYY-MM-DD')
                    });
                }
                this.setData({
                    startDate: e.detail.value
                });
            }
            this.$emit('dateChange', {
                detail: {
                    startDate: this.startDate,
                    endDate: this.endDate
                }
            });
        },

        bindPickerEndChange: function (e) {
            if (this.range === 0) {
                this.setData({
                    endDate: e.detail.value
                });
            } else {
                let beforeThirty = moment(e.detail.value).subtract(30, 'days').calendar(); //结束时间往前30天
                if (moment(beforeThirty).format('YYYY-MM-DD') > this.startDate || this.startDate > this.endDate) {
                    //开始时间和结束时间大于30天
                    uni.showToast({
                        title: '日期间隔最大30天',
                        icon: 'none',
                        duration: 2000
                    });
                    this.setData({
                        startDate: moment(beforeThirty).format('YYYY-MM-DD')
                    });
                }
                this.setData({
                    endDate: e.detail.value
                });
            }
            this.$emit('dateChange', {
                detail: {
                    startDate: this.startDate,
                    endDate: this.endDate
                }
            });
        }
    },
    created: function () {}
};
</script>
<style>
.date-filter {
    height: 112rpx;
    padding: 0 30rpx;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    border-bottom: 16rpx solid #f6f7fa;
}

.date-filter .filter-title {
    margin-right: 32rpx;
}

.date-filter picker {
    flex: 1;
}

.date-filter .date-split {
    padding: 0 10rpx;
    font-size: 28rpx;
    font-weight: 400;
    color: #4b5680;
    line-height: 40rpx;
}

.date-filter .filter-value {
    flex: 1;
    padding: 12rpx 16rpx;
    background: #f6f7fa;
    border-radius: 8rpx;
    border: 1rpx solid #e1e2e7;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 28rpx;
    font-weight: 400;
    color: #4b5680;
    line-height: 40rpx;
}
</style>
